<template>
	<view>
		<u-sticky zIndex="999">
			<view class="">
				<view id="query" class="time dis-flex flex-between-row">
					<view @click="goDay(index)" class="time-item f-26"
						:style="index === 0 ? !item.is_active ? 'padding-top: 51rpx;background: #ECEEFF':'background: #ECEEFF' : ''"
						:class="item.is_active?'time-item-active':''" v-for="(item,index) in timeList" :key="index">
						<view class="">
							{{index === 0 ? item.is_active ? '今日' : '回今日' : item.week }}
						</view>
						<view class="time-item-day f-bold" :style="item.is_active?'font-size : 28rpx' : ''">
							{{index === 0 && !item.is_active? '' : item.day}}
						</view>
						<view v-show="item.is_active" class="time-item-ball"></view>
					</view>
				</view>
			</view>
		</u-sticky>
		<view class="p-y-20"></view>
		<view class="flex-between-row" v-for="(item,index) in list" :key="index">
			<view class="flex-1 t-c class-item" :class="'class-item-bgc'+ index % 4 + '0'">{{item.time_id || '无'}}
			</view>
			<view class="flex-1 t-c class-item" :class="'class-item-bgc'+ index % 4 + '1'">{{item.class || '无'}}
			</view>
			<view class="flex-1 t-c class-item col-f" :class="'class-item-bgc'+ index % 4 + '2'">
				{{item.position || '无'}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getTimetableListDetail
	} from '@/api/list.js'
	export default {
		onLoad() {
			this.getNowTime()
			this.getTimetableList()
		},
		data() {
			return {
				timeList: [],
				list: [{
					time_id: '上课时间',
					class: '课程名称',
					position: '教室地点'
				}]
			}
		},
		methods: {
			getNowTime() {
				const now = new Date()
				const nowMs = now.getTime()
				const weeks = new Array('日', '一', '二', '三', '四', '五', '六')
				const weeks1 = new Array('7', '1', '2', '3', '4', '5', '6')
				this.timeList = []
				for (let i = 0; i < 7; i++) {
					let afterMs = nowMs + 1000 * 60 * 60 * 24 * i
					let afterDate = new Date(afterMs)
					let day = afterDate.getDate()
					let week = afterDate.getDay()
					let fromDate = `${afterDate.getYear()+1900}-${afterDate.getMonth()+1}-${afterDate.getDate()}`
					this.timeList.push({
						'day': day,
						'week': weeks[week],
						'week1': weeks1[week],
						'is_active': false,
						'fromDate': fromDate
					})
					this.$set(this.timeList[0], 'is_active', true)

				}
			},
			goDay(index) {
				this.timeList.forEach(item => {
					item.is_active = false
				})
				this.$set(this.timeList[index], 'is_active', true)
				this.getTimetableList()
			},
			async getTimetableList() {
				const id = this.timeList.find(item => item.is_active === true).week1
				const res = await getTimetableListDetail({
					page: id,
					limit: 6
				})
				if (res.code === 200) {
					this.list = res.data
					this.list.unshift({
						time_id: '上课时间',
						class: '课程名称',
						position: '教室地点'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.time {
		width: 750rpx;
		height: 138rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(0, 0, 0, 0.02);
		border-radius: 12rpx 12rpx 0rpx 0rpx;

		&-item {
			width: 108rpx;
			height: 138rpx;
			padding-top: 17rpx;
			border-radius: 12rpx 0rpx 0rpx 12rpx;
			text-align: center;
			color: #8F8E93;

			&-active {
				color: #000;
			}

			&-day {
				margin-top: 19rpx;
			}

			&-ball {
				margin: 4rpx auto 0;
				width: 10rpx;
				height: 10rpx;
				border-radius: 50%;
				background: linear-gradient(180deg, #75F6A1 0%, #50CFE8 71%);
			}
		}
	}

	.week-picker {
		margin: 20rpx;
		padding: 10rpx 10rpx 10rpx 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
	}

	.class-item {
		padding: 20rpx;

		&-bgc00 {
			background-color: #9acafc;
		}

		&-bgc01 {
			background-color: #3c9cff;
		}

		&-bgc02 {
			background-color: #398ade;
		}

		&-bgc10 {
			background-color: #f7b2b2;
		}

		&-bgc11 {
			background-color: #f56c6c;
		}

		&-bgc12 {
			background-color: #e45656;
		}

		&-bgc20 {
			background-color: #a9e08f;
		}

		&-bgc21 {
			background-color: #71d5a1;
		}

		&-bgc22 {
			background-color: #19be6b;
		}


		&-bgc30 {
			background-color: #f9d39b;
		}

		&-bgc31 {
			background-color: #f9ae3d;
		}

		&-bgc32 {
			background-color: #f1a532;
		}
	}
</style>
